<template>
  <div class="alarmAmount-root">
    <formTitleVue
      title="指标诊断信息"
      :selectOptions="selectOptions"
    />
    <div id ="indicatorDiagnosticInfo-charts" style="height: 300px; width: 100%"></div>

  </div>
</template>

<script>
  import formTitleVue from "@/components/FormTitle/formTitle.vue";
  import { overviewIndicatorDiagnosticInfo }  from "@/api/risk/cityWaringResult";
  import echarts from "echarts";
    export default {
        name: "indicatorDiagnosticInfo",
      components: {
        formTitleVue,
      },
      props:{
        yearOptions:{},
        areaOptions:{},
        oneTargetOptionsMap:{}
      },
      data() {
        return {
          dataNum:{},
          selectOptions: [
            {
              key:"year",
              selectValue: "",
              options: [],
              changeFn: this.selectChange1,
            },
            {
              key:"area",
              selectValue: "",
              options: [],
              changeFn: this.selectChange2,
            },
            {
              key:"oneTarget",
              selectValue: "",
              options: [],
              changeFn: this.selectChange3,
            },
          ],
          searChForm: {
            year:"",
            cityCode:"",
            oneTargetName:""
          },
          oneTargetOptions:[]
        }
      },
      watch:{
        'yearOptions':{
          handler(newVal, oldVal) {
            this.selectOptions.forEach(t=> {
              if (t.key == 'year') {
                t.options = newVal
              }
            })
          },
          deep: true,
          immediate: true
        },
        'areaOptions':{
          handler(newVal, oldVal) {
            this.selectOptions.forEach(t=> {
              if (t.key == 'area') {
                t.options = newVal
              }
            })
          },
          deep: true,
          immediate: true
        },
        'oneTargetOptions':{
          handler(newVal, oldVal) {
            this.selectOptions.forEach(t=> {
              if (t.key == 'oneTarget') {
                if(newVal){
                  console.log("newVal===,",newVal)
                  t.options =  newVal
                  if(newVal.length>0){
                    this.selectOptions[2].selectValue = this.selectOptions[2].options[0].value
                    this.searChForm.oneTargetName = this.selectOptions[2].options[0].value
                  }else {
                    this.selectOptions[2].selectValue =""
                    this.searChForm.oneTargetName = ""
                  }
                  this.search()
                }
              }
            })
          },
          deep: true,
          immediate: true
        },
        'oneTargetOptionsMap':{
          handler(newVal, oldVal) {
            let year = this.selectOptions[0].options[0].value
            let temp = newVal[year].map(t=> t)
            this.oneTargetOptions = temp;
          },
          deep: true,
          immediate: true
        }
      },
      methods: {
        draw(drawData){
          if (!document.getElementById("indicatorDiagnosticInfo-charts")) {
            console.warn("初始化echarts dom标签未找到");
            return;
          }
          let myChart = echarts.init(document.getElementById("indicatorDiagnosticInfo-charts"));
          let option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {},
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                data: drawData.xAxle
              }
            ],
            yAxis: [
              {
                type: 'value',
                axisLabel: {
                  formatter: '{value} %' //设置单位为百分比
                },
                name: "单位%",
                max:100
              }
            ],
            series: drawData.data.map(t=>{
              return {
                name:t.name,
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                  focus: 'series'
                },
                data: t.data
              }
            }),
            // series: [
            //   {
            //     name: 'Email',
            //     type: 'bar',
            //     stack: 'Ad',
            //     emphasis: {
            //       focus: 'series'
            //     },
            //     data: [120, 132, 101, 134, 90, 230, 210]
            //   },
            //   {
            //     name: 'Union Ads',
            //     type: 'bar',
            //     stack: 'Ad',
            //     emphasis: {
            //       focus: 'series'
            //     },
            //     data: [220, 182, 191, 234, 290, 330, 310]
            //   },
            //
            // ]
          };
          myChart.setOption(option);
          const that = this
          myChart.off('click');//先解绑事件，防止事件重复触发
          myChart.on('click',function(params) {
            // console.log('params==',params)
            if(that.searChForm.cityCode==''){
              that.$message.warning("请选择具体城市跳转")
               return
            }
            that.$router.push({
              // name: 'cityDetailDetail',
              path:'/public/cityAnalysis/cityDetailDetail',
              query: {
                cityCode:  that.searChForm.cityCode == ''?'44': that.searChForm.cityCode,
                year: that.searChForm.year,
                checkType:''
              },
            })
          })
        },
        selectChange1(item){
          this.searChForm.year = item
          let temp =this.oneTargetOptionsMap[item].map(t=> t)
          this.oneTargetOptions = temp;
          // this.search()
        },
        selectChange2(item){
          this.searChForm.cityCode = item
          this.search()
        },
        selectChange3(item){
          this.searChForm.oneTargetName = item
          this.search()
        },
        search() {
          this.fetch({
            ...this.searChForm,
          })
        },
        fetch(params = {}) {
          overviewIndicatorDiagnosticInfo(params).then(res => {
            if (res.code == 200) {
              console.log("overviewIndicatorDiagnosticInfo=======",res.data)
              this.draw(res.data)
              // this.tableData=res.data
            } else {
              this.$message({
                message: this.$t('tips.systemException'),
                type: 'error'
              })
            }
          }).finally(final => {
          })
        },
        init(){
          this.selectOptions[0].selectValue = this.selectOptions[0].options[0].value
          this.searChForm.year = this.selectOptions[0].options[0].value
          this.selectOptions[2].selectValue = this.selectOptions[2].options[0].value
          this.searChForm.oneTargetName = this.selectOptions[2].options[0].value
          this.searChForm.cityCode = ""
          this.search()
        },
      },
      mounted() {
        this.init()
      },
    }
</script>

<style scoped>

</style>
